<template>
    <div class="box">
      <h1>setup模式</h1>
      <h3>姓名：{{ name }}</h3>
      <h3>身高：{{ user.height }}</h3>
      <h3>技能：{{ user.skill }}</h3>

      <h4>来着父组件的数据：{{ msg }}</h4>

      <button @click="change">修改数据</button>
      <button @click="toParent">子传父</button>
    </div>
  </template>
  
  <!-- 在script标签里面，添加一个setup属性，那么整个 script 就直接会变成 setup 函数
    1.组件只需要引入就可以直接使用，不需要注册
  -->
  <script setup>
  import {ref,reactive,defineProps,defineEmits,defineExpose} from "vue"

    //2、定义数据和方法 --- 不需要return，模板中可以直接使用
    let name = ref("赵嘉伟");
    let user = reactive({
       height:178,
       skill:"发射x光线"
    });
    //定义方法
    function change(){
      name.value = "赵嘉伟1";
    }

    //3.父传子  接收父组件数据   如果要接收父组件传递的数据，需要引入defineProps实现
    defineProps(["msg","data"]);

    //4.子传父 -- 引入defineEmits，得到emit，然后在通过emit触发事件
    let emit = defineEmits(["toParent"]);
    function toParent(){
      emit("toParent","就吃，就吃")
    }

    //5.定义数据和方法，想给父组件使用
    function lookup(){
      console.log("数据回显");
    }

    // 显示暴露的数据，才可以在父组件拿到，方法也要如此暴露
    defineExpose({
      lookup,
      name
    })



  
   
  </script>
  
  <style scoped>
   
  </style>